import React, { Fragment } from 'react';
import cn from 'classnames';
import styles from './index.less';

function Step(props) {
    const { title, disabled } = props;
    return (
        <div
            className={cn(styles.stepItem, { [styles.disabled]: disabled })}
            onClick={e => {
                if (disabled) {
                    e.stopPropagation();
                }
            }}
        >
            {title}
        </div>
    );
}

function Steps(props) {
    const { current, onChange, children } = props;

    const childrenArr = React.Children.map(children, (item, index) => ({ ...item, key: index })).filter(item =>
        React.isValidElement(item)
    );
    const cnt = childrenArr.length;

    const arr = childrenArr.map((item, index) => {
        const Item = (
            <div
                key={item.key}
                className={current === index ? styles.current : ''}
                onClick={() => {
                    if (onChange) onChange(index);
                }}
            >
                {item}
            </div>
        );
        if (index < cnt - 1) {
            return (
                <Fragment key={item.key}>
                    {Item}
                    <span></span>
                </Fragment>
            );
        }
        return Item;
    });

    return <div className={styles.stepsWrap}>{arr}</div>;
}

Steps.Step = Step;

export default Steps;
